<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .city-filter {
            margin-bottom: 20px;
        }
        .attraction-card {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            transition: all 0.3s ease;
        }
        .attraction-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .pagination {
            justify-content: center;
            margin-top: 20px;
        }
        .tag-badge {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .ranking-badge {
            background-color: #ffc107;
            color: #212529;
        }
        .page-jump {
            margin-left: 10px;
        }
        .page-jump input {
            width: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">景点列表</h1>

        <!-- 城市筛选下拉框 -->
        <div class="city-filter">
            <form method="get" action="{% url 'attractions_list' %}" id="filter-form">
                <div class="row">
                    <!-- 城市筛选 -->
                    <div class="col-md-4">
                        <select name="city" class="form-select" onchange="this.form.submit()">
                            <option value="">所有城市</option>
                            {% for city in cities %}
                                <option value="{{ city }}" {% if selected_city == city %}selected{% endif %}>
                                    {{ city }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <!-- 5A 景区筛选 -->
                    <div class="col-md-4">
                        <select name="sight_level" class="form-select" onchange="this.form.submit()">
                            <option value="">所有等级</option>
                            <option value="5A" {% if selected_sight_level == '5A' %}selected{% endif %}>5A 景区</option>
                        </select>
                    </div>
                    <!-- 免费景区筛选 -->
                    <div class="col-md-4">
                        <select name="is_free" class="form-select" onchange="this.form.submit()">
                            <option value="">所有类型</option>
                            <option value="0" {% if selected_is_free == '0' %}selected{% endif %}>免费景区</option>
                            <option value="1" {% if selected_is_free == '1' %}selected{% endif %}>非免费景区</option>
                        </select>
                    </div>
                </div>
                <!-- 重置按钮 -->
                <div class="row mt-3">
                    <div class="col-md-12">
                        <button type="reset" class="btn btn-secondary" onclick="resetFilters()">重置筛选</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 景点列表 -->
        <div class="row">
            {% for attraction in page_obj %}
                <div class="col-md-6">
                    <div class="attraction-card" style="background-image: url('{{ attraction.cover_image_url }}'); background-size: cover; background-position: center;">
                        <h3>{{ attraction.poi_name }}</h3>
                        <p><strong>城市:</strong> {{ attraction.city_name }}</p>

                        {% if attraction.short_features %}
                        <p><strong>特征:</strong> {{ attraction.short_features }}</p>
                        {% endif %}

                        {% if attraction.tag_name_list %}
                        <div class="mb-2">
                            <strong>标签:</strong>
                            {% for tag in attraction.tag_name_list %}
                                <span >{{ tag }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}

                        {% if attraction.sight_category_info %}
                        <div>
                            <strong>榜单:</strong>
                            {% for ranking in attraction.sight_category_info %}
                                <span >{{ ranking }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                        <a href="{% url 'attraction_detail' attraction.id %}?page={{ page_obj.number }}" class="btn btn-primary mt-2">查看详情</a>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="alert alert-warning">暂无景点数据</div>
                </div>
            {% endfor %}
        </div>

        <!-- 分页导航 -->
        {% if page_obj.paginator.num_pages > 1 %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}{% if request.GET.sight_level %}&sight_level={{ request.GET.sight_level }}{% endif %}{% if request.GET.is_free %}&is_free={{ request.GET.is_free }}{% endif %}">&laquo; 首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}{% if request.GET.sight_level %}&sight_level={{ request.GET.sight_level }}{% endif %}{% if request.GET.is_free %}&is_free={{ request.GET.is_free }}{% endif %}">上一页</a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}{% if request.GET.sight_level %}&sight_level={{ request.GET.sight_level }}{% endif %}{% if request.GET.is_free %}&is_free={{ request.GET.is_free }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}{% if request.GET.sight_level %}&sight_level={{ request.GET.sight_level }}{% endif %}{% if request.GET.is_free %}&is_free={{ request.GET.is_free }}{% endif %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}{% if request.GET.sight_level %}&sight_level={{ request.GET.sight_level }}{% endif %}{% if request.GET.is_free %}&is_free={{ request.GET.is_free }}{% endif %}">尾页 &raquo;</a>
                    </li>
                {% endif %}

                <!-- 跳转到指定页码 -->
                <li class="page-item page-jump">
                    <form method="get" action="{% url 'attractions_list' %}" class="d-flex">
                        <input type="number" name="page" class="form-control" min="1" max="{{ page_obj.paginator.num_pages }}" placeholder="页码">
                        <input type="hidden" name="city" value="{{ request.GET.city }}">
                        <input type="hidden" name="sight_level" value="{{ request.GET.sight_level }}">
                        <input type="hidden" name="is_free" value="{{ request.GET.is_free }}">
                        <button type="submit" class="btn btn-primary ms-2">跳转</button>
                    </form>
                </li>
            </ul>
        </nav>
        {% endif %}

    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        function resetFilters() {
            // 重置表单
            document.getElementById('filter-form').reset();
            // 手动设置筛选器的值为默认值
            document.querySelector('select[name="city"]').value = '';
            document.querySelector('select[name="sight_level"]').value = '';
            document.querySelector('select[name="is_free"]').value = '';
            // 提交表单以刷新页面
            document.getElementById('filter-form').submit();
        }
    </script>
</body>
</html>